<template>
	<view class="default" @click="click"
		:style="{width: width + 'rpx', height: height + 'rpx',
				borderRadius: borderRadius + 'rpx', 
				backgroundColor: backgroundColor, color: color}"
	>{{title}}</view>
</template>

<script>
	/***********
	@贵宾厅订单模块通用按钮组件
	参数说明：
	:type type有两个值 1、hollow空心带边框 2、solid实心  默认为hollow
	:title type:String 默认标题为”按钮“，
	:backgroundColor type: String
	:color type: String 字体颜色和边框颜色设置
	:fontSize type: String 字体大小 默认28rpx，使用时切记勿传'rpx'
	:width type: String 默认240rpx，使用时切记勿传'rpx'
	:height type: String 默认88rpx，使用时切记勿传'rpx'
	***********/
	export default{
		props:{
			scene:{
				type: String,
				default: ''
			},
			title:{
				type:String,
				default: "按钮"
			},
			backgroundColor:{
				type: String,
				default: ''
			},
			color:{
				type: String,
				default: ''
			},
			fontSize:{
				type: [String, Number],
				default: '28'
			},
			width:{
				type: [String, Number],
				default: '680'
			},
			height:{
				type: [String, Number],
				default: '88'
			},
			borderRadius:{
				type: [String, Number],
				default: '12'
			},
		},
		data() {
			return {
				// type: this.$store.state.role,
				solid: "solid",
				hollow: "hollow",
			}
		},
		methods:{
			click(){
				this.$emit("click")
			},
		},
	}
</script>

<style lang="scss">
	$defaultColor:#999999; //默认颜色
	.default{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		margin: 0 auto;
		background-color: $st-color-primary;
	}
	.hollow{
		border: 1px solid $defaultColor;
		background-color: #FFFFFF;
		color: $defaultColor;
	}
	.solid{
		background-color: $defaultColor;
		color: #FFFFFF;
	}
</style>
